<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('货位分析')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div data-options="region:'north'">
    <fieldset style="border-color: #E7F0FF">
        <form id="user-form">
            <div class="select-list">
                <table>
                    <tr>
                        <li>
                            <label>仓库：</label>
                            <select id="warehouseId" name="warehouseId" style="width: 150px" onchange="search()">
                                <option value="01">CTU库</option>
                                <option value="02">四向车库</option>
                                <option value="03">标准库</option>
                                <option value="04">臂架库</option>
                            </select>
                        </li>
                    </tr>
                </table>
            </div>
        </form>
    </fieldset>
</div>
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        search();
    });

    function nonMsg() {
        search();
    }

    function search() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var warehouseId = $("#warehouseId").val();
        $.ajax({
            //"url": "/kpi/cs?&roadwayId="+roadwayId,
            "url": "/kpi/cs?&warehouseId=" +warehouseId,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var s1 = json.s1;
                var s2 = json.s2;
                var s3 = json.s3;
                var s4 = json.s4;
                var s5 = json.s5;
                var s6 = json.s6;
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({//加载数据图表
                    tooltip: {
                        formatter: '{b} : {c}',//默认值null，内容格式器
                    },
                    series: {
                        name: '货位分析',
                        type: 'pie',
                        //高亮显示光标选中区域
                        emphasis: {
                            itemStyle: {
                                // 高亮时点的颜色
                                color: 'red'
                            },
                        },
                        data: [
                            {value: s1, name: "空货位"},
                            {value: s2, name: "满货位"},
                            {value: s3, name: "入库分配"},
                            {value: s4, name: "出库分配"},
                            {value: s5, name: "入库需盘点"},
                            {value: s6, name: "出库需盘点"}
                        ]
                    }
                });

            }
        });
        // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
    }

</script>
<div id="tb" style="text-align: center " hidden>
    <form>
        <input id="no" type="radio" checked="checked" name="roadwayId" hidden onclick="nonMsg()" value="">

        <input id="no1" type="radio"  name="roadwayId" onclick="nonMsg()" value="1">
        <label for="no1">巷道1</label>

        <input id="no2" type="radio" name="roadwayId" onclick="nonMsg()" value="2">
        <label for="no2">巷道2</label>

        <input id="no3" type="radio" name="roadwayId" onclick="nonMsg()" value="3">
        <label for="no2">巷道3</label>
    </form>


</div>
</body>
</html>